import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'

export default {
  install (app) {
    // 定义全局指令
    // 注意调用使用通过 v-lazy='xxx'
    app.directive('lazy', {
      // 指令所在的元素，dom结构被解析完成
      // 图片懒加载核心：图片标签进入可视区，就把src的值设置为真实的图片地址
      mounted (el, { value }) {
        // console.log(el, value) // el 等于Dom元素 value值（v-lazy里的）
        const { stop } = useIntersectionObserver(
          // 被检测的目标元素，可以是组件，也可以是Dom元素
          el,
          ([{ isIntersecting }]) => {
            // 如果元素可见
            if (isIntersecting) {
              // 设置图片的src 为真实的图片地址
              el.src = value
              // 如果图片加载失败，设置默认图片
              el.onerror = () => {
                el.src = defaultImg
              }
              // 停止检测
              stop()
            }
          }
        )
      }
    })
  }
}
